<template>
  <div class="header_main">
    <div class="header_main-p"></div>
    <div class="headercon">
      <!-- <router-link to="/home" class="logo" type="primary"> -->
      <img
        class="logo"
        src="@/assets/images/logo.png"
        alt=""
        @click="logoClick()"
      />
      <!-- </router-link> -->
      <ul class="header_title">
        <li
          v-for="(item, index) in custom_list"
          :key="item.id + 'head'"
          @click="drawerHandel(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <ul class="icon">
        <li class="iconitem">
          <div
            @click="
              show_icon_item == 0 ? (show_icon_item = -1) : (show_icon_item = 0)
            "
            class="img"
          >
            <img src="@/assets/images/xiaoxi.png" alt="" />
          </div>
          <div class="messagePop" v-if="show_icon_item == 0">
            <ul>
              <!-- <li class="message">
                <p>{{ t('您的新注册会员买一送一优惠券即将过期') }}</p>
                <router-link tag="p" to="/login" class="red">{{ t("去下单") }}</router-link>
              </li>
              <li>
                <p>{{ t("您的新注册会员买一送一优惠券即将过期") }}</p>
                <router-link tag="p" to="/login" class="red">{{ t("去下单") }}</router-link>
              </li> -->
              <li v-for="(item, index) in system_msg_list" :key="index">
                <p class="msg-content">{{ item.content }}</p>
                <!-- <router-link tag="span" to="/" class="red">{{ t("去下单") }}</router-link> -->
                <span class="red" @click="gotoHandle('/')">{{
                  t("去下单")
                }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li class="iconitem">
          <div
            @click="
              show_icon_item == 1 ? (show_icon_item = -1) : (show_icon_item = 1)
            "
            class="img"
          >
            <img src="@/assets/images/qh.png" alt="" />
          </div>
          <div v-if="show_icon_item == 1" class="qhPop">
            <p @click="switch_language('en')">{{ t("英文") }}</p>
            <p @click="switch_language('zh-Hant')">{{ t("中文繁体") }}</p>
            <!-- <p @click="switch_language('zh-Hans')">{{ t("中文简体") }}</p> -->
          </div>
        </li>
        <li class="iconitem">
          <div
            @click="
              show_icon_item == 2 ? (show_icon_item = -1) : (show_icon_item = 2)
            "
            class="img"
          >
            <img src="@/assets/images/user.png" alt="" />
          </div>
          <div v-if="show_icon_item == 2" class="uesrPop">
            <div class="user" @click="gomine()">
              <el-avatar
                class="avatar"
                :src="$store.state.userInfo.avatar | imgSrc"
              ></el-avatar>
              <p v-if="!$store.state.token">{{ $t("公共.未登录") }}</p>
              <p v-if="$store.state.token">
                {{ $store.state.userInfo.nickname }}
              </p>
            </div>
            <ul>
              <li @click="gotoHandle('order', 'query')">
                <img src="@/assets/images/home/订单.png" alt="" />
                <p>{{ t("订单") }}</p>
              </li>
              <li @click="gotoHandle('shoppingCart')">
                <img src="@/assets/images/home/购物车满.png" alt="" />
                <p>{{ t("购物车") }}</p>
              </li>
              <li @click="gotoHandle('worksLibrary')">
                <img src="@/assets/images/home/作品.png" alt="" />
                <p>{{ t("作品库") }}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="navpop" v-if="drawer">
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        direction="ttb"
        :modal-append-to-body="false"
        @close="drawer_select = -1"
      >
        <el-tabs tab-position="left" style="height: 200px">
          <el-tab-pane
            v-for="(item, index0) in custom_list[drawer_select].children"
            :key="item.id + 'pane'"
          >
            <span slot="label"
              >{{ item.name }} <i class="el-icon-arrow-right"></i
            ></span>
            <ul class="type">
              <li v-for="(obj, index1) in item.children" :key="obj.id + 'li'">
                <h3>{{ obj.name }}</h3>
                <ul class="model">
                  <li
                    v-for="(sub_obj, index2) in obj.children_cat"
                    :key="sub_obj.id + 'li2'"
                    @click="goeldeta(sub_obj)"
                  >
                    {{ sub_obj.name }}
                  </li>
                </ul>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { homeTitle, getSysMsgList } from "@/utils/api";
export default {
  name: "headerView",
  props: {},
  data() {
    return {
      show_icon_item: -1,
      drawer: false,
      drawer_select: -1,
      custom_list: [],
      system_msg_list: [],
    };
  },
  mounted() {
    homeTitle().then((res) => {
      if (res.code == 1) {
        console.log("导航栏的选项", res.data);
        this.custom_list = res.data;
      }
    });
    if (this.$store.state.userInfo.token) {
      getSysMsgList().then((res) => {
        if (res.code == 1) {
          this.system_msg_list = res.data;
        }
      });
    }
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`导航.${v}`);
    },
    switch_language(language) {
      this.$i18n.locale = language;
      console.log("当前语言----", language);
      this.$store.state.language = language;
      this.show_icon_item = -1;
    },
    // 跳转分类
    goeldeta(item) {
      // this.$router.push("electronics");
      // console.log(item.id);
      this.$router.push({
        path: "/choiceness",
        query: { id: item.id },
      });
      this.drawer_select = -1;
      this.drawer = false;
    },
    gomine() {
      if (this.$store.state.token) {
        this.$router.push("/mine");
      } else {
        this.$router.replace("/login");
      }
      this.show_icon_item = -1;
    },
    drawerHandel(index) {
      if (this.drawer_select == index) {
        this.drawer = false;
        this.drawer_select = -1;
      } else {
        this.drawer = true;
        this.drawer_select = index;
      }
    },
    gotoHandle(action, jumpType = "name") {
      this.show_icon_item = -1;
      if (jumpType == "query") {
        this.$router.push({
          path: `/${action}`,
          query: { type: 0 },
        });
      } else if (jumpType == "name") {
        this.$router.push(action);
      }
    },
    logoClick() {
      this.show_icon_item = -1;
      this.drawer_select = -1;
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.header_main {
  @import "../styles/var.less";
  width: 100%;
  position: relative;

  .header_main-p {
    height: @navHeight;
  }

  .headercon {
    width: 100%;
    height: @navHeight;
    background: #ff5757;
    padding: 0px 5%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;

    .logo {
      width: 15%;
      cursor: pointer;
      user-select: none;
    }

    .header_title {
      width: 1000px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      li {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        user-select: none;
        cursor: pointer;
      }

      li:last-child {
        margin-right: 0;
      }
    }

    .icon {
      height: 90px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .iconitem {
        height: 100%;
        padding-left: 20px;
        position: relative;
        cursor: pointer;

        .img {
          height: 100%;
          display: flex;
          align-items: center;

          img {
            width: 26px;
            height: 26px;
          }
        }

        .messagePop {
          z-index: 88;
          position: absolute;
          right: 0;
          top: 90px;
          width: 450px;
          // height: 160px;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);

          ul {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;

            li {
              width: 90%;
              height: 80px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              border-bottom: 1px solid #f1f1f1;

              .msg-content {
                flex: 1;
                font-size: 16px;
                font-weight: 400;
                color: #222222;
                line-height: 38px;
              }

              .red {
                font-size: 18px;
                font-weight: bold;
                color: #ff5757;
                line-height: 38px;
                cursor: pointer;
                user-select: none;
              }
            }
          }
        }

        .qhPop {
          z-index: 88;
          position: absolute;
          right: 0;
          top: 90px;
          width: 150px;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
          display: flex;
          flex-flow: row wrap;
          justify-content: center;

          p {
            width: 80%;
            height: 80px;
            font-size: 16px;
            font-weight: 400;
            color: #222222;
            line-height: 80px;
            border-bottom: 1px solid #f1f1f1;
          }
        }

        .uesrPop {
          z-index: 88;
          position: absolute;
          right: 0;
          top: 90px;
          width: 450px;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
          display: flex;
          flex-flow: row wrap;
          justify-content: center;

          .user {
            width: 80%;
            height: 80px;
            display: flex;
            align-items: flex-end;
            padding-top: 20px;

            .avatar {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-right: 10px;
            }

            p {
              font-size: 18px;
              font-weight: bold;
              color: #222222;
              line-height: 50px;
            }
          }

          ul {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
              display: flex;
              flex-direction: column;
              align-items: center;

              p {
                padding-top: 10px;
              }
            }
          }
        }
      }
    }
  }

  .navpop {
    .type {
      border-left: 1px solid #f1f1f1;
      display: flex;
      // justify-content: space-around;
      padding-right: 150px;

      li {
        margin-left: 70px;

        h3 {
          font-size: 18px;
          color: #222222;
          margin-bottom: 20px;
        }

        .model {
          li {
            font-size: 15px;
            margin-bottom: 20px;
            margin-left: 0px;
            user-select: none;
            cursor: pointer;
          }
        }
      }
    }
  }
}

/deep/.el-drawer__wrapper {
  top: 90px;
}

/deep/.el-drawer__open .el-drawer.ttb {
  height: auto !important;
}

/deep/.el-tabs {
  height: auto !important;
  margin-top: 20px;
}

/deep/.el-tabs__item {
  width: 385px;
  font-size: 18px;
  font-weight: bold;
  color: #999999;
}

/deep/.el-tabs__item.is-active {
  font-size: 18px;
  font-weight: bold;
  color: #222222;
}

/deep/.el-tabs__nav-wrap::after {
  position: static !important;
}

/deep/.el-tabs__active-bar {
  // position: static;
  background-color: transparent;
}

/deep/.v-modal {
  top: 90px !important;
}
</style>
